/**
 * @desc:图片展示公共组件
 * @img: zjf商品图片url
 * @storeId： 门店id
 * @goodsId: 商品id
 * @size: 图片压缩比例和宽度 默认48，只支持48，64，84
 * @isMask: 是否需要展示商品遮罩信息（下架，售罄）
 * @goodsState: 商品状态
 * @carefullySelected: 是否是云仓严选商品 1:是 0:否
 */

 import React from 'react';
 import RenderCloudIcon from './RenderCloudIcon';
 import { formatSysImg } from '@/utils/utils.jsx';
 import styles from './index.module.less';
 
 //获取商品状态 商品状态 0下架，1正常，10违规（禁售）
 const renderMarkText = ({size, goodsState, goodsStorage}) => {
		 const height = `${size}px`;
		 const maskStyle = {
				 position: 'absolute',
				 top: 0,
				 width: height,
				 height: height,
				 textAlign: 'center',
				 lineHeight: height,
				 color: '#fff',
				 background: 'rgba(0, 0, 0, 0.5)',
		 };
 
		 if (goodsState || goodsState == 0) {
				 if (goodsState == 1) {
						 if (goodsStorage == 0) {
								 return <div style={maskStyle}>已售罄</div>;
						 }
						 return null;
				 } else {
						 return <div style={maskStyle}>已下架</div>;
				 }
		 } else {
				 return null;
		 }
 };
 
 export default ({
		 img,
		 storeId,
		 size = 48,
		 goodsState,
		 goodsStorage,
		 style={},
		 isMask = false,
		 isCloudIcon=false,
 }) => {
 
	 const src = formatSysImg(img, storeId, size);

	 return (
		 <div 
			 className={styles[`imgWrap${size}`]}
			 style={{ position: 'relative', ...style }}
		 >
			 <img src={src} referrerPolicy='no-referrer' style={{ width: '100%', height: '100%' }} />
			 { isMask && renderMarkText({size, goodsState, goodsStorage}) }
			 { isCloudIcon == 1 && <RenderCloudIcon />}
		 </div>
	 )
 };